<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8"/>
  <title>好友留言板</title>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <style>
    *{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB",STHeiti,"Microsoft YaHei",sans-serif}
    body{background:#f5f5f5;color:#333;line-height:1.6;padding:20px}
    h1{text-align:center;margin-bottom:20px;color:#333}
    .wrapper{max-width:600px;margin:0 auto;background:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);padding:20px}
    /* 表单区 */
    .form input,.form textarea{width:100%;padding:10px;margin-bottom:10px;border:1px solid #ddd;border-radius:4px;font-size:15px}
    .form textarea{min-height:80px;resize:vertical}
    .form button{background:#0078ff;color:#fff;border:none;padding:10px 18px;border-radius:4px;font-size:15px;cursor:pointer}
    .form button:hover{background:#0062d1}
    /* 留言区 */
    .list{margin-top:30px}
    .msg{background:#fafafa;border-left:4px solid #0078ff;padding:12px 14px;margin-bottom:12px;border-radius:4px;position:relative}
    .msg .name{font-weight:bold;margin-right:6px}
    .msg .time{font-size:12px;color:#999;margin-left:8px}
    .msg .content{white-space:pre-wrap;word-break:break-all;margin-top:6px}
    .msg .del{position:absolute;top:6px;right:6px;background:transparent;border:none;color:#ff4d4f;font-size:18px;cursor:pointer}
    .empty{text-align:center;color:#999;margin-top:20px}
  </style>
</head>
<body>

<div class="wrapper">
  <h1>好友留言板</h1>

  <!-- 留言表单 -->
  <form class="form" id="msgForm">
    <input type="text" id="nickname" placeholder="你的昵称" maxlength="20" required/>
    <textarea id="content" placeholder="留言内容…" required></textarea>
    <button type="submit">发表留言</button>
  </form>

  <!-- 留言列表 -->
  <div class="list" id="msgList">
    <div class="empty">暂无留言，快来抢沙发！</div>
  </div>
</div>

<script>
(() => {
  const LS_KEY = 'guestbook';

  /* 从 localStorage 读取 */
  function loadMsgs() {
    try {
      return JSON.parse(localStorage.getItem(LS_KEY)) || [];
    } catch {
      return [];
    }
  }

  /* 保存到 localStorage */
  function saveMsgs(msgs) {
    localStorage.setItem(LS_KEY, JSON.stringify(msgs));
  }

  /* 渲染留言列表 */
  function render() {
    const listDom = document.getElementById('msgList');
    const msgs = loadMsgs();
    if (msgs.length === 0) {
      listDom.innerHTML = '<div class="empty">暂无留言，快来抢沙发！</div>';
      return;
    }
    listDom.innerHTML = '';
    msgs.forEach((m, idx) => {
      const div = document.createElement('div');
      div.className = 'msg';
      div.innerHTML = `
        <span class="name">${m.name}</span>
        <span class="time">${m.time}</span>
        <button class="del" data-idx="${idx}">×</button>
        <div class="content">${m.content}</div>
      `;
      listDom.appendChild(div);
    });
  }

  /* 新增留言 */
  document.getElementById('msgForm').addEventListener('submit', (e) => {
    e.preventDefault();
    const name = document.getElementById('nickname').value.trim();
    const content = document.getElementById('content').value.trim();
    if (!name || !content) return;

    const msgs = loadMsgs();
    msgs.unshift({
      name,
      content,
      time: new Date().toLocaleString('zh-CN')
    });
    saveMsgs(msgs);
    render();
    e.target.reset();
  });

  /* 删除留言（事件委托） */
  document.getElementById('msgList').addEventListener('click', (e) => {
    if (!e.target.classList.contains('del')) return;
    const idx = +e.target.dataset.idx;
    const msgs = loadMsgs();
    msgs.splice(idx, 1);
    saveMsgs(msgs);
    render();
  });

  /* 第一次打开时渲染 */
  render();
})();
</script>

</body>
</html>